<template>
  <div class="share_chain_dealDetail">
    <c-title :hide="false" :text="pageTitle"></c-title>
    <div class="headBox">
      <van-tabs v-model="active" title-active-color="#F15353" color="#F15353" @change="headTabChange">
        <van-tab :title="item.name" :name="item.ind" v-for="(item, index) in topTabs" :key="index"></van-tab>
      </van-tabs>
      <van-search @search="searchPost" v-if="plugnNmae != 'store'" v-model="keyword" shape="round" background="#ffffff" placeholder="请输入会员ID/姓名/手机号" />
    </div>
    <div class="inquireNav" v-if="plugnNmae == 'inquire'">
      <van-tabs v-model="inquire_act" title-active-color="#F15353" color="#F15353" @change="inquireChange">
        <van-tab title="奖励完成" name="2"></van-tab>
        <van-tab title="奖励中" name="1"></van-tab>
        <van-tab title="待奖励" name="0"></van-tab>
      </van-tabs>
    </div>
    <div class="navChild" v-if="inquire_act != 1">
      <div class="tabChild" :class="[navChild == '0' ? 'sel' : '']" @click="tapNav('0')">全部</div>
      <div class="tabChild" :class="[navChild == '1' ? 'sel' : '']" @click="tapNav('1')">今日</div>
      <div class="tabChild" :class="[navChild == '2' ? 'sel' : '']" @click="tapNav('2')">昨日</div>
      <div class="tabChild" :class="[navChild == '3' ? 'sel' : '']" @click="tapNav('3')">本月</div>
      <div class="tabChild" :class="[navChild == '4' ? 'sel' : '']" @click="tapNav('4')">自定义</div>
    </div>
    <div class="time" v-if="navChild == '4' && currentDate_start && currentDate_end">{{ dateCount_start }}至{{ dateCount_end }}</div>
    <shareChainList :plugnNmae="plugnNmae" :summary="summary" :listData="listData" :total="total" :inquire_act="inquire_act"></shareChainList>
    <van-popup v-model="showDate" position="bottom" round :close-on-click-overlay="false">
      <div class="popupBox">
        <div class="popupTop">
          <div class="left">自定义</div>
          <div class="right" @click="closePopup">
            <van-icon name="cross" color="#707070" />
          </div>
        </div>
        <div class="dateSelect">
          <div class="dateLeft" :class="[currentDate_start ? 'md' : '']" @click="tapTimeBtn('startTimeShow')">{{ currentDate_start ? dateCount_start : "开始时间" }}</div>
          <div class="dateSelect_txt">至</div>
          <div class="dateLeft" :class="[currentDate_end ? 'md' : '']" @click="tapTimeBtn('endTimeShow')">{{ currentDate_end ? dateCount_end : "结束时间" }}</div>
        </div>
      </div>
      <van-datetime-picker v-if="startTimeShow" visible-item-count="3" v-model="currentDate_start" type="datetime" :show-toolbar="false" :min-date="minDate" :max-date="maxDate"> </van-datetime-picker>
      <van-datetime-picker v-else v-model="currentDate_end" visible-item-count="3" type="datetime" :show-toolbar="false" :min-date="minDate" :max-date="maxDate"> </van-datetime-picker>
      <div class="confirmBtn" @click="tapComfirm">确定</div>
    </van-popup>
  </div>
</template>
<script>
import shareChainList from "./component/share_chan_list.vue";
import { scrollMixin } from "utils/mixin";

export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 2,
      inquire_act: 2,
      navChild: "0",
      keyword: "",
      showDate: false,
      startTimeShow: false,
      endTimeShow: false,

      minDate: new Date(),
      maxDate: new Date(),
      currentDate_start: new Date(),
      currentDate_end: "",
      plugnNmae: "",
      topTabs: [],
      summary: [],
      listData: [],
      total: 0,

      page: 1,
      isLoadMore: true,
      total_page: 0
    };
  },
  components: { shareChainList },
  computed: {
    dateCount_start() {
      return this.timestampToTime(Date.parse(this.currentDate_start) / 1000);
    },
    dateCount_end() {
      return this.timestampToTime(Date.parse(this.currentDate_end) / 1000);
    },
    pageTitle() {
      if (this.plugnNmae == "deal") {
        return "交易明细";
      } else if (this.plugnNmae == "inquire") {
        return "占位查询";
      } else if (this.plugnNmae == "store") {
        return "门店交易";
      }
    }
  },
  methods: {
    timestampToTime: function(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "/";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/";
      let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      return Y + M + D + h + m;
    },
    closePopup() {
      if (this.navChild == "4") {
        if (!this.currentDate_start || !this.currentDate_end) {
          this.navChild = "0";
          this.showDate = false;
          return;
        }
        this.initData();
        this.getData();
        this.showDate = false;
        return;
      }
      this.showDate = false;
    },
    tapComfirm() {
      // 时间弹窗关闭按钮 =（确认功能） || !this.currentDate_start
      if (this.fun.isTextEmpty(this.currentDate_end)) {
        this.$toast("请选择结束时间");
        return;
      }
      if (this.fun.isTextEmpty(this.currentDate_start)) {
        this.$toast("请选择开始时间");
        return;
      }
      let start = Date.parse(this.currentDate_start) / 1000;
      let end = Date.parse(this.currentDate_end) / 1000;
      console.log(start, end);
      if (start >= end) {
        this.$toast("开始时间不能小于或等于结束时间");
        return;
      }
      this.showDate = false;
      this.initData();
      this.getData();
    },
    tapTimeBtn(key) {
      if (key == "startTimeShow") {
        this.startTimeShow = true;
        this.endTimeShow = false;
      } else {
        this.startTimeShow = false;
        this.endTimeShow = true;
        this.currentDate_end = this.currentDate_start;
        console.log(this.currentDate_end);
      }
    },
    tapNav(key) {
      this.navChild = key;
      if (key == "4") {
        this.showDate = true;
        this.startTimeShow = true;
        this.endTimeShow = false;
        return;
      }
      this.initData();
      this.getData();
    },
    searchPost() {
      this.initData();
      this.getData();
    },
    headTabChange() {
      this.inquire_act = 2;
      this.navChild = "0";
      this.initData();
      this.getData();
    },
    inquireChange() {
      this.initData();
      this.getData();
    },
    initData() {
      // this.currentDate_start = new Date();
      // this.currentDate_end = "";
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.listData = [];
      this.summary = [];
    },
    async getData() {
      let urlStr = "";
      let json = {
        order_type: this.active,
        kwd: this.keyword ? this.keyword : "",
        time_type: Number(this.navChild)
      };
      if (this.navChild == "4") {
        if (this.plugnNmae == "inquire" && this.inquire_act == 1) {
          return;
        }
        if (!this.currentDate_start || !this.currentDate_end) {
          this.tapNav("4");
          return;
        }
        json.start_time = Date.parse(this.currentDate_start) / 1000;
        json.end_time = Date.parse(this.currentDate_end) / 1000;
      }
      if (this.plugnNmae == "deal" || this.plugnNmae == "store") {
        urlStr = "plugin.share-chain.frontend.trade-log.index";
      } else {
        urlStr = "plugin.share-chain.frontend.trade-log.queueIndex";
        json.status = Number(this.inquire_act);
      }

      let { result, msg, data } = await $http.post(urlStr, json, "加载中");
      if (result == 0) return this.$toast(msg);
      if (result == 1) {
        this.summary = data.summary;
        this.listData = data.data;
        this.isLoadMore = true;
        this.total = data.total;
        this.total_page = data.last_page;
        if (!this.total_page) {
          this.page = 0;
        }
      }
    },
    async getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      console.log(this.page, this.total_page);
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let urlStr = "";
        let json = {
          order_type: this.active,
          kwd: this.keyword ? this.keyword : "",
          time_type: this.navChild,
          page: this.page
        };
        if (this.navChild == "4") {
          if (this.plugnNmae == "inquire" && this.inquire_act == 1) {
            return;
          }
          if (!this.currentDate_start || !this.currentDate_end) {
            this.tapNav("4");
            return;
          }
          json.start_time = Date.parse(this.currentDate_start) / 1000;
          json.end_time = Date.parse(this.currentDate_end) / 1000;
        }
        if (this.plugnNmae == "deal" || this.plugnNmae == "store") {
          urlStr = "plugin.share-chain.frontend.trade-log.index";
        } else {
          urlStr = "plugin.share-chain.frontend.trade-log.queueIndex";
          json.status = Number(this.inquire_act);
        }
        let { result, msg, data } = await $http.post(urlStr, json, "加载中");
        this.isLoadMore = true;
        if (result == 0) {
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.$toast(msg);
          return;
        }
        if (result == 1) {
          this.listData = this.listData.concat(data.data);
        }
      }
    }
  },
  activated() {
    console.log(this.$route.params.plugn);
    this.plugnNmae = this.$route.params.plugn;
    let topTabs = [];
    if (this.plugnNmae == "deal") {
      this.fun.setWXTitle("交易明细");
      topTabs = [
        {
          name: "收银台交易明细",
          ind: 2
        },
        {
          name: "门店订单交易明细",
          ind: 1
        }
      ];
    } else if (this.plugnNmae == "inquire") {
      this.fun.setWXTitle("占位查询");
      topTabs = [
        {
          name: "收银台占位查询",
          ind: 2
        },
        {
          name: "门店占位查询",
          ind: 1
        }
      ];
    } else if (this.plugnNmae == "store") {
      this.fun.setWXTitle("门店交易");
      topTabs = [
        {
          name: "收银台交易统计",
          ind: 2
        },
        {
          name: "门店订单交易统计",
          ind: 1
        }
      ];
    }
    this.topTabs = topTabs;
    var nowYear = new Date().getFullYear() - 25;
    var nowDate = new Date(`${nowYear}/01/01`);
    this.minDate = nowDate;
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.confirmBtn {
  margin: 1.5rem 0.75rem;
  border-radius: 0.25rem;
  background: #f15353;
  font-size: 0.88rem;
  color: #ffffff;
  padding: 0.63rem 0;
}
.popupBox {
  padding: 0 1rem;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  .dateSelect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .dateSelect_txt {
      margin: 0 0.63rem;
    }
    .dateLeft {
      color: #aaaab3;
      background: #f8f8fb;
      padding: 0.47rem 0;
      flex: 1;
      border-radius: 0.94rem;
    }
    .md {
      background: #feeded;
      border: 1px solid #f15353;
      color: #f15353;
      border-radius: 0.94rem;
    }
  }
  .popupTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.94rem;
    .left {
      font-size: 0.94rem;
      line-height: 1.59rem;
      margin-top: 1.5rem;
      color: #00001c;
    }
    .right {
      margin-top: 1rem;
    }
  }
}
.navChild {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.75rem;
  box-sizing: border-box;
  overflow: hidden;
  .tabChild {
    width: 4.13rem;
    height: 1.75rem;
    background: rgba(255, 255, 255, 0.39);
    line-height: 1.75rem;
    border-radius: 0.94rem;
  }
  .sel {
    border: 1px solid #f15353;
    background: #f5e4e4;
    color: #f15353;
  }
}
.time {
  margin: 0.94rem 0;
  font-size: 0.81rem;
  color: #3b3b4a;
  margin-left: 0.75rem;
  text-align: left;
}
</style>
